<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id='app'>
        <h1>{{count}}</h1>
        <button @click='countClick'>点击加一</button>
    </div>
</body>
<script>
    const app = {
        data() {
            return {
                count:100,
                obj:{},
            }
        },
        // 生命周期（共八个），挂载阶段执行
        mounted() {
            const newObj={}
            // false 内存地址不一样
            // console.log(this.obj==newObj);

            this.obj=newObj
            // false this.obj在data创建的，所以被代理proxy了，与新对象不同
            // 只把值给到，内存地址还是不一样
            // console.log(this.obj==newObj);
        }
        ,
        methods: {
            countClick(){
                this.count++
                // console.log(document.querySelector('h1').innerText)
                // 延迟作为异步可以获取最新值
                // 原因，vue使用的虚拟DOM，就是js对象，
                // 数据变化时,优先更新虚拟DOM,然后再将虚拟DOM渲染成真实DOM
                // DIFF算法：专门用来比较新老dom，可以找到新老dom有变化的地方，只更新有变化的算法
                // setTimeout(() => {
                //     console.log(document.querySelector('h1').innerText)
                // }, 0);
                Vue.nextTick(() => {
                    // nextTick会在真实Dom更新完成后调用的一个函数
                    console.log(document.querySelector('h1').innerText)
                })


            }
        },
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>